@layout("/common/_container.html"){


<script type="text/javascript">
	var ctx="${ctxPath}";
	var grid_selector = "#grid-table";
	var pager_selector = "#grid-pager";
	
	$(function(){
		initGrid();
		initMenuBtn("btns","${code}");
	});
	
	/**
	*用于执行按钮加载事件结束后操作的ajax请求(否则会导致回调覆盖,也可以使用 async:false)
	*/
	function doOther(){
		initZtree();
	}
	
	function initGrid(){
		var grid_url = ctx+"/${code}/list";//查询列表接口
		var _colnames=[ "序列","菜单编号", "菜单父编号","菜单名称","请求地址","图标样式","排序","层级","窗口大小","状态"];
		var _colmodel=[   {name:"id",index:"id", width:80,hidden:true},
						  {name:"code",index:"code", width:130},
						  {name:"pcode",index:"pcode", width:130},
						  {name:"name",index:"name", width:80},
						  {name:"url",index:"url", width:120},
						  {name:"icon",index:"icon", width:350},
						  {name:"num",index:"num", width:40,align:"right"},
						  {name:"levels",index:"levels", width:40,align:"right"},
						  {name:"tips",index:"tips", width:60},
						  {name:"dic_status",index:"status", width:40}
						];
		
		jQuery(grid_selector).jqGrid({
			url:grid_url,
		    //shrinkToFit:true,//适用于较少字段,响应式
			colNames:_colnames,
			colModel:_colmodel, 
			jsonReader:{id:"id"},
			pager : pager_selector,
			postData: {sort: "status asc,id", order: "asc"}
		});
		

	}
	
	
	
	function initZtree(){
		var setting = {
				data: {
					simpleData: {
						enable: true
					}
				},
				callback: {
					beforeClick: zTreeBeforeClick
				}
			};
			
			var ajax = new Ajax("${ctxPath}/cache/menuTreeList", function(data){
            	if(data.code === 0){
					$.fn.zTree.init($("#zTree"), setting, data.data);
				}
				else{
					layer_alert("数据加载失败", "error");
				}
			});
			ajax.start();

	}
	
	function zTreeBeforeClick(treeId, treeNode, clickFlag) {
	    var id=treeNode.id;
	    if(id==0){
		    exwhere="";
		    searchGrid();
		    return;
	    }
	    exwhere="{\"code\":\""+id+"\"}";
	    searchGrid();
	};
	
</script>
	

	<!-- 配置grid -->
	<div class="row">
		<div class="col-sm-3">
			<div class="widget-box widget-color-blade">
				<div class="widget-header">
					<h4 class="widget-title lighter smaller">菜单</h4>
				</div>

				<div class="widget-body">
					<div class="widget-main padding-8">
						<ul id="zTree" class="ztree"></ul>
					</div>
				</div>
			</div>
		</div>
	
	
	
		<div class="col-xs-9 tb-grid">
			<!-- 配置查询 -->
			@ var _col=[
			@			  {name:"菜单编号",index:"code",type:"text"},
			@			  {name:"菜单父编号",index:"pcode",type:"text"},
			@			  {name:"菜单名称",index:"name",type:"text"},
			@			  {name:"图标样式",index:"icon",type:"text"},
			@			  {name:"请求地址",index:"url",type:"text"},
			@			  {name:"数据源",index:"source",type:"text"},
			@			  {name:"文件地址",index:"path",type:"text"},
			@			  {name:"排序",index:"num",type:"text"},
			@			  {name:"层级",index:"levels",type:"text"},
			@			  {name:"备注",index:"tips",type:"text"},
			@ 			  {name:"状态",index:"toint_status_equal",type:"select_902"}
			@		   ];
			@ include("/common/_function/_search.html",{"col":_col}){}
			<!-- 按钮组 -->
			<div class="welljq well-sm" id="btns"></div>
			<!-- grid -->
			<table id="grid-table"></table>
			<!-- 分页 -->
			<div id="grid-pager"></div>
		</div>
	</div>
	
	<!-- 引入列表页所需js -->
	<link rel="stylesheet" href="${ctxPath}/static/zTree/css/zTreeStyle/zTreeStyle.css" />
	<script src="${ctxPath}/static/zTree/js/jquery.ztree.core.js" type="text/javascript" ></script>
	@include("/common/_listscript.html"){}
@}	